import React from 'react';
import { Button, Row, Col } from 'antd';
import { DownOutlined } from '@ant-design/icons';
import QueueAnim from 'rc-queue-anim';
import TweenOne, { TweenOneGroup } from 'rc-tween-one';
import BannerAnim, { Element } from 'rc-banner-anim';
import { isImg } from './utils';
import 'rc-banner-anim/assets/index.css';

const { BgElement } = Element;
class Banner extends React.PureComponent {
    render() {
        return (
            <div className="banner1">
                <TweenOneGroup            
                    key="bannerGroup"
                    enter={{ opacity: 0, type: 'from' }}
                    leave={{ opacity: 0 }}
                    component=""
                >
                    <div className="banner1-wrapper" key="wrapper">
                        <BannerAnim key="BannerAnim"
                         ref={d=>this.bannerAnimRef=d}>
                            <Element key="elem0" className="banner-user-elem">
                                <BgElement key="bg" className="bg bg0" style={{ backgroundImage: `url('/images/page1-1.png')` }} />
                                <div className='blackMask' />
                                <QueueAnim
                                    type={['bottom', 'top']}
                                    delay={200}
                                    key="text"
                                    className="banner1-text-wrapper"
                                >
                                    <div key="logo" className="banner1-title textShadow">
                                        <span style={{ color: "yellow" }}>自研铸魂</span>，以全栈自主技术构筑网络管理根基
                                    </div>
                                    <div key="content" className="banner1-content textShadow">



                                        <p>MSRM3 自诞生起便将 “自主研发、安全可控”深植基因，彻底摒弃“套壳开源、拼凑插件”的技术捷径。从底层协议栈到上层可视化引擎，每一行代码均由国内团队原生重构，构建起100%自主知识产权、全栈可控的网络管理技术体系。</p>
                                        <p>通过全链路自主设计实现核心逻辑的完全掌控，在规避外源组件风险、保障技术自主性方面形成坚实壁垒，全面兼容国产CPU与操作系统平台，为各行业用户提供契合信创要求、支撑国产化演进的技术底座。</p>

                                    </div>
                                    <Button ghost key="button" className="banner1-button"
                                    onClick={() => this.bannerAnimRef.next()}>
                                        轻翼强擎 ▷▷▷
                                    </Button>
                                </QueueAnim>
                            </Element>
                            <Element key="elem0" className="banner-user-elem">
                                <BgElement key="bg" className="bg bg0" style={{ backgroundImage: `url('/images/page1-2.png')` }} />
                                <div className='blackMask' />
                                <QueueAnim
                                    type={['bottom', 'top']}
                                    delay={200}
                                    key="text"
                                    className="banner1-text-wrapper"
                                >
                                    <div key="logo" className="banner1-title textShadow"
                                        style={{ top: -100 }}>
                                        <span style={{ color: "yellow" }}>轻翼强擎</span>——全能网络洞察的极致效能引擎
                                    </div>
                         
                                </QueueAnim>
                                <div style={{
                                    width: '100%',
                                    position: 'absolute',
                                    bottom: 200,
                                    textAlign: 'center'
                                }}>


                                    <Row className="banner1-content textShadow" style={{ color: '#fff' }}>
                                        <Col span={1}></Col>
                                        <Col span={9}><p>MSRM3 以约 30MB 的AOT编译体量，将全网拓扑管理、实时设备监控、IP/MAC精准定位、流量历史回溯等企业级功能高度集成，其轻巧程度与动辄数百MB的传统臃肿软件形成鲜明对比。这一效能飞跃源于.NET 9 AOT 技术的根本性革新：代码预编译为原生机器码，实现启动即巅峰性能，且无需安装或依赖任何外部运行环境。</p></Col>
                                        <Col span={4}></Col>
                                        <Col span={9}><p>这款高度优化的统一服务引擎，于单一进程内稳定驱动Web服务、实时数据采集、日志处理与多通道告警等全量任务。这种极致效率的架构，在带来内存占用显著降低的同时，确保了从秒级故障定位到任意时间点流量回放等高级功能的流畅体验。以“轻翼”之形，卸去冗余重负；以“强擎”之核，赋能全域洞察。</p></Col>
                                        <Col span={1}></Col>
                                    </Row>
           <Button ghost key="button" className="banner1-button" style={{marginRight: 20}}     onClick={() => this.bannerAnimRef.prev()}>
                                         ◁◁◁ 自研铸魂
                                    </Button> <Button ghost key="button" className="banner1-button"     onClick={() => this.bannerAnimRef.next()}>
                                        轻翼强擎 ▷▷▷
                                    </Button>

                                </div>

                            </Element>
                                                 <Element key="elem0" className="banner-user-elem">
                                <BgElement key="bg" className="bg bg0" style={{ backgroundImage: `url('/images/page1-3.png')` }} />
                                <div className='blackMask' />
                                <QueueAnim
                                    type={['bottom', 'top']}
                                    delay={200}
                                    key="text"
                                    className="banner1-text-wrapper"
                                >
                                    <div key="logo" className="banner1-title textShadow">
                                        <span style={{ color: "yellow" }}>自研铸魂</span>，以全栈自主技术构筑网络管理根基
                                    </div>
                                    <div key="content" className="banner1-content textShadow">



                                        <p>MSRM3 自诞生起便将 “自主研发、安全可控”深植基因，彻底摒弃“套壳开源、拼凑插件”的技术捷径。从底层协议栈到上层可视化引擎，每一行代码均由国内团队原生重构，构建起100%自主知识产权、全栈可控的网络管理技术体系。</p>
                                        <p>通过全链路自主设计实现核心逻辑的完全掌控，在规避外源组件风险、保障技术自主性方面形成坚实壁垒，全面兼容国产CPU与操作系统平台，为各行业用户提供契合信创要求、支撑国产化演进的技术底座。</p>

                                    </div>
                                    <Button ghost key="button" className="banner1-button"
                                    onClick={() => this.bannerAnimRef.next()}>
                                        轻翼强擎 ▷▷▷
                                    </Button>
                                </QueueAnim>
                            </Element>
                            <Element key="elem1" className="banner-user-elem">
                                <BgElement key="bg" className="bg bg1" />
                                <QueueAnim
                                    type={['bottom', 'top']}
                                    delay={200}
                                    key="text"
                                    className="banner1-text-wrapper"
                                >22222222222222222222
                                    <div key="logo" className="banner1-title">
                                        {typeof '/images/HqnZZjBjWRbjyMr.png' === 'string' &&
                                            '/images/HqnZZjBjWRbjyMr.png'.match(isImg) ? (
                                            <img src="/images/HqnZZjBjWRbjyMr.png" width="100%" alt="img" />
                                        ) : (
                                            '/images/HqnZZjBjWRbjyMr.png'
                                        )}
                                    </div>
                                    <div key="content" className="banner1-content">

                                        在技术架构层面，MSRM3采用绿色架构设计，仅单个可执行文件，文件大小不足30MB，却承载着全网设备监控、智能拓扑发现、IP精准定位等企业级功能。这种"拷贝即部署、备份即迁移"的极致体验，完美解决了传统网管软件在信创环境中面临的"安装复杂、迁移困难、依赖冲突"等痛点。

                                        在技术架构上，MSRM3采用独特的模块化设计理念，通过单文件绿色部署、无外部依赖、内网安全更新等机制，解决了传统网管软件'安装难、迁移难、更新难'的痛点，实现'拷贝即部署、备份即迁移'的极致体验。从拓扑发现算法到IP精准定位引擎，从多通道智能告警到内置网络工具箱，每一项功能的实现都凝聚着对网络管理场景的深刻理解与技术创新的决心。

                                        MSRM3始终保持着旺盛的生命力，通过更新日志动态展示产品进化历程。2025年9月发布的重构AOT版实现性能飞跃，对用户提出的反馈与建议，始终以最快速度响应并落实，确保软件持续优化迭代，始终保持强大的市场竞争力。

                                        自研铸魂，不仅是MSRM3的技术底色，更是其为用户创造价值、为行业树立标杆的坚定信念。
                                        自研铸魂，不止于代码，更是一种责任。
                                        自研铸魂，不仅是技术层面的自主创新，更是对国家信息技术应用创新战略的躬身实践。MSRM3正以扎实的技术底蕴和前瞻的产品理念，为构建安全可控的网络基础设施贡献着自己的力量。

                                    </div>
                                    <Button ghost key="button" className="banner1-button">
                                        Learn More
                                    </Button>
                                </QueueAnim>
                            </Element>
                            <Element key="elem2" className="banner-user-elem">
                                <BgElement key="bg" className="bg bg1" />
                                <QueueAnim
                                    type={['bottom', 'top']}
                                    delay={200}
                                    key="text"
                                    className="banner1-text-wrapper"
                                >
                                    <div key="logo" className="banner1-title">
                                        {typeof '/images/HqnZZjBjWRbjyMr.png' === 'string' &&
                                            '/images/HqnZZjBjWRbjyMr.png'.match(isImg) ? (
                                            <img src="/images/HqnZZjBjWRbjyMr.png" width="100%" alt="img" />
                                        ) : (
                                            '/images/HqnZZjBjWRbjyMr.png'
                                        )}
                                    </div>
                                    <div key="content" className="banner1-content">
                                        一个高效的页面动画解决方案
                                    </div>
                                    <Button ghost key="button" className="banner1-button">
                                        Learn More
                                    </Button>
                                </QueueAnim>
                            </Element>
                        </BannerAnim>
                    </div>
                </TweenOneGroup>
                <TweenOne
                    animation={{
                        y: '-=20',
                        yoyo: true,
                        repeat: -1,
                        duration: 1000,
                    }}
                    className="banner1-icon"
                    style={{ bottom: 40 }}
                    key="icon"
                >
                    <DownOutlined />
                </TweenOne>
            </div>
        );
    }
}

export default Banner;
